<template>
  <div class="middle">
    <div id="first"></div>
    <div id="second"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
// 按需引入 echarts
import * as echarts from "echarts";

onMounted(() => {
  dealSum();
  sexSum();
});
function dealSum() {
  var myChart = echarts.init(document.getElementById("first"));
  // 制定图表的配置型和数据
  var option: echarts.EChartsOption = {
    // title:{text:"每周数据统计"},
    legend: {},
    tooltip: {
      trigger: "axis",
      showContent: false,
    },
    dataset: {
      source: [
        ["时间", "周一", "周二", "周三", "周四", "周五", "周六", "周日"],
        ["用户数量", 56, 82, 88, 70, 53, 85, 34],
        ["咨询人数", 51, 51, 55, 53, 73, 68, 83],
        ["订单数量", 40, 62, 69, 36, 45, 32, 53],
        ["订单完成", 25, 37, 41, 18, 33, 49, 32],
      ],
    },
    xAxis: { type: "category" },
    yAxis: { gridIndex: 0 },
    grid: { top: "55%" },
    series: [
      {
        type: "line",
        smooth: true,
        seriesLayoutBy: "row",
        emphasis: { focus: "series" },
      },
      {
        type: "line",
        smooth: true,
        seriesLayoutBy: "row",
        emphasis: { focus: "series" },
      },
      {
        type: "line",
        smooth: true,
        seriesLayoutBy: "row",
        emphasis: { focus: "series" },
      },
      {
        type: "line",
        smooth: true,
        seriesLayoutBy: "row",
        emphasis: { focus: "series" },
      },
      {
        type: "pie",
        id: "pie",
        radius: "30%",
        center: ["50%", "25%"],
        emphasis: {
          focus: "self",
        },
        label: {
          show: true,
          formatter: "{b}: {@周一} ({d}%)",
        },
        encode: {
          itemName: "时间",
          value: "周一",
          tooltip: "周一",
        },
        color: ["#e160ea ", " #8ae619", "#28cfae", "#eeea17"], 
      },
    ],
  };
  myChart.on("updateAxisPointer", function (event: any) {
    const xAxisInfo = event.axesInfo[0];
    if (xAxisInfo) {
      const dimension = xAxisInfo.value + 1;
      myChart.setOption<echarts.EChartsOption>({
        series: {
          id: "pie",
          label: {
            formatter: "{b}: {@[" + dimension + "]} ({d}%)",
          },
          encode: {
            value: dimension,
            tooltip: dimension,
          },
        },
      });
    }
  });

  myChart.setOption<echarts.EChartsOption>(option);
}

function sexSum() {
  var myCharts = echarts.init(document.getElementById("second"));
  // 制定图表的配置型和数据
  var option: echarts.EChartsOption;

  // prettier-ignore
  const femaleData = [[28, 12], [30, 9], [25, 8], [24, 10], [23, 7],
  [32, 9], [26, 6], [29, 15], [31, 14], [27, 18],
  [33, 11], [32, 10], [33, 13], [22, 5], [28, 7],
  [20, 8], [31, 8], [35, 17], [24, 6], [32, 16],
  [25, 9], [35, 20], [29, 7], [36, 23], [30, 14],
  [34, 11], [34, 12], [37, 10], [31, 10], [28, 5],
  [23, 5], [26, 7], [36, 21], [28, 6], [22, 5],
  [26, 7], [32, 17], [28, 6], [28, 13], [30, 9],
  [31, 10], [25, 8], [32, 9], [35, 10], [28, 7],
  [32, 12], [31, 9], [26, 9], [28, 7], [32, 15],
  [27, 18], [34, 14], [29, 9], [30, 10], [24, 7],
  [26, 8], [28, 8], [26, 8], [35, 15], [29, 9],
  [27, 10], [25, 11], [32, 16], [30, 8], [26, 10],
  [32, 11], [28, 9], [28, 8], [30, 9], [28, 7],
  [25, 8], [30, 9], [32, 8], [31, 8], [25, 7],
  [26, 7], [28, 10], [31, 8], [30, 12], [27, 9],
  [28, 9], [33, 6], [24, 7], [27, 9], [31, 6],
  [29, 8], [24, 7], [25, 7], [30, 8], [35, 9],
  [36, 10], [31, 8], [26, 6], [32, 18], [24, 7],
  [25, 7], [30, 8], [27, 7], [29, 12], [24, 6],
  [28, 7], [31, 8], [33, 9], [25, 17], [28, 7],
  [32, 10], [25, 8], [30, 9], [32, 12], [26, 9],
  [28, 9], [25, 7], [24, 8], [28, 9], [30, 8],
  [32, 9], [33, 10], [28, 7], [28, 12], [25, 7],
  [28, 10], [33, 11], [34, 9], [37, 9], [32, 10],
  [29, 8], [32, 9], [29, 8], [26, 9], [25, 7],
  [30, 9], [30, 9], [27, 8], [26, 10], [25, 9],
  [26, 7], [26, 8], [27, 9], [28, 7], [29, 7],
  [26, 7], [22, 6], [31, 7], [25, 8], [33, 7],
  [27, 6], [27, 10], [30, 8], [31, 8], [28, 8],
  [29, 8], [31, 8], [28, 5], [32, 9], [26, 6],
  [27, 10], [28, 6], [32, 9], [26, 8], [28, 7],
  [31, 6], [28, 6], [28, 8], [32, 9], [25, 8],
  [25, 7], [33, 9], [30, 8], [28, 8], [25, 8],
  [30, 8], [30, 9], [32, 11], [33, 10], [29, 8],
  [30, 8], [29, 8]
];

  // prettier-ignore
  const maleDeta = [ [29, 10], [29, 12], [35, 13], [32, 12], [32, 14],
  [34, 13], [33, 16], [33, 14], [29, 8], [33, 15],
  [34, 14], [34, 16], [37, 18], [34, 13], [34, 12],
  [33, 14], [38, 19], [31, 11], [32, 12], [34, 15],
  [34, 14], [36, 14], [32, 10], [34, 15], [35, 17],
  [37, 16], [36, 15], [36, 13], [28, 8], [32, 7],
  [35, 13], [32, 10], [38, 12], [39, 14], [32, 11],
  [30, 8], [36, 10], [30, 9], [34, 11], [37, 15],
  [39, 18], [31, 17], [32, 13], [34, 12], [36, 15],
  [38, 20], [34, 16], [32, 20], [30, 15], [26, 8],
  [28, 14], [35, 17], [34, 15], [39, 16], [28, 7],
  [28, 8], [33, 12], [35, 15], [35, 12], [32, 6],
  [31, 7], [34, 10], [35, 8], [38, 14], [31, 10],
  [32, 11], [26, 7], [29, 8], [36, 12], [34, 8],
  [32, 9], [35, 14], [33, 8], [34, 8], [30, 9],
  [28, 7], [35, 9], [34, 8], [33, 8], [28, 7],
  [29, 7], [32, 9], [35, 8], [34, 10], [32, 9],
  [32, 9], [37, 6], [28, 7], [29, 9], [32, 6],
  [30, 8], [28, 7], [29, 7], [34, 8], [36, 9],
  [37, 10], [32, 8], [29, 6], [35, 8], [28, 7],
  [29, 7], [34, 8], [31, 7], [32, 8], [29, 7],
  [31, 7], [34, 8], [36, 9], [29, 7], [29, 7],
  [33, 10], [29, 8], [32, 9], [35, 11], [30, 9],
  [32, 9], [29, 7], [28, 8], [29, 9], [34, 8],
  [35, 9], [36, 10], [29, 7], [29, 12], [28, 7],
  [29, 10], [36, 11], [37, 9], [39, 9], [34, 10],
  [31, 8], [34, 9], [31, 8], [32, 9], [29, 7],
  [35, 8], [35, 8], [32, 7], [32, 9], [29, 8],
  [30, 7], [30, 8], [31, 9], [32, 7], [33, 7],
  [30, 7], [26, 6], [35, 7], [29, 8], [37, 7],
  [31, 6], [31, 10], [34, 8], [34, 8], [32, 8],
  [32, 8], [34, 8], [32, 5], [35, 9], [29, 6],
  [30, 10], [28, 8], [32, 9], [29, 7], [32, 8],
  [35, 6], [32, 6], [32, 8], [35, 9], [28, 8],
  [28, 7], [36, 9], [33, 8], [32, 8], [28, 8],
  [32, 8], [32, 9], [34, 11], [36, 10], [30, 8],
  [32, 8], [30, 8]]

  function calculateAverage(data: number[][], dim: number) {
    let total = 0;
    for (var i = 0; i < data.length; i++) {
      total += data[i][dim];
    }
    return (total /= data.length);
  }

  const scatterOption: echarts.EChartsOption = (option = {
    title: { text: "各年龄人数"},
    xAxis: {
      scale: true,
    },
    yAxis: {
      scale: true,
    },
    color: ["#cf70d3", "#55e68c"], // 设置散点图的颜色
    series: [
      {
        type: "scatter",
        id: "female",
        dataGroupId: "female",
        universalTransition: {
          enabled: true,
          delay: function (idx, count) {
            return Math.random() * 600;
          },
        },
        data: femaleData,
      },
      {
        type: "scatter",
        id: "male",
        dataGroupId: "male",
        universalTransition: {
          enabled: true,
          delay: function (idx, count) {
            return Math.random() * 600;
          },
        },
        data: maleDeta,
      },
    ],
  });

  const barOption: echarts.EChartsOption = {
    title: { text: "男女平均年龄分布" },
    xAxis: {
      type: "category",
      data: ["Female", "Male"],
    },
    yAxis: {},
    color: ["#cf70d3"],
    series: [
      {
        type: "bar",
        id: "total",
        data: [
          {
            value: calculateAverage(maleDeta, 0),
            groupId: "male",
          },
          {
            value: calculateAverage(femaleData, 0),
            groupId: "female",
          },
        ],
        universalTransition: {
          enabled: true,
          seriesKey: ["female", "male"],
          delay: function (idx, count) {
            return Math.random() * 600;
          },
        },
      },
    ],
  };

  let currentOption = scatterOption;

  setInterval(function () {
    currentOption = currentOption === scatterOption ? barOption : scatterOption;
    myCharts.setOption(currentOption, true);
  }, 5000);

  option && myCharts.setOption(option);
}
</script>

<style lang="scss" scoped>
.middle {
  height: 500px;
  overflow: hidden;
  #first {
    display: inline-block;
    background-color: rgb(255, 255, 255);
    margin-left: 35px;
    width: 600px;
    height: 500px;
  }
  #second {
    display: inline-block;
    background-color: rgb(255, 255, 255);
    color: rgb(207, 204, 31);
    margin-left: 50px;
    width: 600px;
    height: 500px;
  } 
}
</style>
